<html>
	<head>
	
	<link rel="stylesheet" href="css_jss/bootstrap.min.css" type="text/css">
	<link rel="stylesheet" href="css_jss/custom.css" type="text/css">
	
	<link rel="stylesheet" href="css_jss/footable.core.min.css" type="text/css">
	<!--<link rel="stylesheet" href="cart.css" type="text/css">-->
	<script type="text/javascript" src="css_jss/jquery-1.11.1.min.js"  ></script>
	<script type="text/javascript" src="css_jss/bootstrap.min.js"  ></script>
	<script type="text/javascript" src="css_jss/custom.js"  ></script>
	<script type="text/javascript" src="css_jss/footable.min.js"  ></script>
	
	</head>


<body style="background-color:transparent;">
<div aria-hidden="false" style="display: block;" class="modal fade in" id="cartModal">
    <div class="modal-dialog">
      <div class="modal-content" id="cartContent">

<div class="cartContainer" data-backtocart="">
  <form  class="form-horizontal ajax-cart-form" id="cart_form" style="margin:0;" method="post" accept-charset="utf-8">
<input name="token_" id="cart_form_input" value="2c84cb74ec36719ef811eecc169999d5" style="display:none;" type="hidden">
<div class="modal-header">
           <button onclick="parent.closeIFrame()"  type="button" class="close" data-dismiss="modal" aria-hidden="true" title="Close Details">x</button>
         <h3 id="myModalLabel">Shopping Cart</h3>
  </div><br>
<div class="model-container table-responsive" id="ModelProductData">
 <table id="cart_table" class="table table-striped table-bordered table-responsive">
<thead>
<tr>
  <th data-toggle="true" width="20%">Item Description</th>
  <th data-hide="phone,tablet" width="15%">Size</th>
  <th data-hide="phone,tablet" width="15%">Color</th>
  <th data-hide="phone" width="15%">Price</th>
  <th data-hide="phone" width="15%">Qty.</th>
  <th style="text-align:right;" width="15%">Sub-Total</th>
  <th width="5%">Remove</th>
</tr>
</thead>
<tbody>
<tr>
          <td>Camera</td>
            
            
                                                                                         <td></td>
                                                                                        <td>black</td>
                                        
                                  
          <td>$200.00</td>
          <td>
           
<input name="1[rowid]" value="1b6bb754d2b7cd0444bd2af95162deb6" type="hidden">
         <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                <div class="input-group">
                  <span class="input-group-btn">
                    <button type="submit" class="btn btn-default decrement_qty qty-btn jsr">-</button>
                  </span>
                  <input name="1[qty]" value="1" maxlength="3" size="5" min="1" class="form-control product_qty product_qty_size text-center" type="number">
                  <span class="input-group-btn">
                    <button type="submit" class="btn btn-default increment_qty qty-btn jsr">+</button>
                  </span>
                </div><!-- /input-group -->
              </div><!-- /.col-lg-6 -->
         </div>
         </td>
          <td style="text-align:right;">$200.00</td>
          <td colspan="4"><a class="btn btn-default remove-item" ><i class="glyphicon glyphicon-remove"></i></a></td>
        </tr>
</tbody>
<tbody><tr>
          <td>Camera Lenses Collection</td>
            
            
                                                                                         <td>small</td>
                                                                                        <td>black</td>
                                        
                                  
          <td>$250.50</td>
          <td>
           
<input name="2[rowid]" value="5fbd5311f76b676f01ffc483b149da87" type="hidden">
         <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                <div class="input-group">
                  <span class="input-group-btn">
                    <button type="submit" class="btn btn-default decrement_qty qty-btn jsr">-</button>
                  </span>
                  <input name="2[qty]" value="1" maxlength="3" size="5" min="1" class="form-control product_qty product_qty_size text-center" type="number">
                  <span class="input-group-btn">
                    <button type="submit" class="btn btn-default increment_qty qty-btn jsr">+</button>
                  </span>
                </div><!-- /input-group -->
              </div><!-- /.col-lg-6 -->
         </div>
         </td>
          <td style="text-align:right;">$250.50</td>
          <td colspan="4"><a class="btn btn-default remove-item" ><i class="glyphicon glyphicon-remove"></i></a></td>
        </tr>
</tbody>
</table>
</div>
 <div class="modal-footer">
<div id="shopping_cart_total" class="alert alert-info" style="text-align:right;">Base-Total: $450.50 + Shipping: $100.00 = <strong>Total: $550.50 USD</strong>
<input value="Update" id="updateCartBtn" class="btn btn-default" type="submit">
</div>

  <a  onclick="parent.closeIFrame()" class="btn btn-default btn-sm cart-btn continue-shopping" data-dismiss="modal" aria-hidden="true" title="Continue Shopping"><i class="glyphicon glyphicon-arrow-left"></i>&nbsp;Continue Shopping</a>
  

<a  class="btn btn-warning btn-sm cart-btn checkout_submit_order "><i>Submit Order</i> <i class="glyphicon glyphicon-envelope"></i></a>
 <a  class="btn btn-warning btn-sm cart-btn checkout_with_paypal "><i>Checkout with</i> <img src="img/logo_paypal_106x28.png"></a>
</div>
</form><script type="text/javascript">

  $(document).ready(function($) {

   $('.footable').footable();
     
    var isAjaxReq = true;
      
   $('.qty-btn').on('click',function(e){
          var $this = $(this),
          $product_qty = $this.parent().parent().find('.product_qty');

          product_qty_val = Number($product_qty.val());

          if($this.hasClass('increment_qty')){
            $product_qty.val( product_qty_val + 1);
          }else{
            var newQtyVal = (product_qty_val - 1);
            $product_qty.val((newQtyVal <= 0) ? 1 : newQtyVal);
          };

      });


   $pageContainer = $('.main-container');
   $('.ajax-cart-form').on('submit',ajaxFormSubmit);

    $('.remove-item').on('click',removeItemRequest);

    $('.checkout_with_paypal').on('click', function(e){
         e.preventDefault();
        var $this = $(this);
         if($this.hasClass('disabled'))
         return false;

         window.location = $this.attr('href');
    });

    function ajaxFormSubmit(e){
        e.preventDefault();

         var $this = $(this),
            formAction = $this.attr('action');

             if($this.hasClass('disabled'))
             return false;

            $this.addClass('disabled').attr('disabled', 'disabled');

       $.post(formAction, $this.serialize(),function(data){
             updateCart(data);
       },'JSON');
       };

       function removeItemRequest(e){

       e.preventDefault();
          var $this = $(this),
           actionURL = $this.attr('href');

            $this.parents('tr').remove();

          $.post(actionURL, function(data){
             updateCart(data);
          },'JSON');
       };

       function updateCart(data){
            $('.cartContainer').replaceWith(data.page_data);

            $('.shopping-cart-btn').html(data.cartBtnMarkup).find('i.icon-shopping-cart').removeClass('icon-shopping-cart').addClass('glyphicon glyphicon-shopping-cart');
       };

    $('.checkout_submit_order').on('click', function(e){
        e.preventDefault();

        if ($('.cartContainer').data('backtocart') == 'cart') {
          isAjaxReq = false;
        }
        
        var $this = $(this);
        if($this.hasClass('disabled'))
        return false;
        $cartModal = isAjaxReq ? $('#cartModal') :  $('.cartContainer');

        $cartModal.finish().slideUp();
        
        if (isAjaxReq) {
          
          modalContent = 'modal-content';
          modalDialog  = 'modal-dialog';
          $('.cartContainer').data('backtocart','cart');

        } else {
          modalContent = '';
          modalDialog  = '';
          $('.cartContainer').data('backtocart','cart');
          
        }
        $cartModal.html('<div class="'+modalDialog+'"><div class="'+modalContent+'" id="cartContent"><div style="padding:10%; text-align:center;">  <img src="http://jqueryphpstoreshop-demo.livelyworks.net/1.2.0/assets/img/ajax-loader.gif"></br> Loading...</div></div></div>');
        $cartModal.slideDown();
        var $this = $(this),
            requestURL = $this.attr('href');
            $.post(requestURL, function(data){
              $cartModal.html('<div class="'+modalDialog+'"><div class="'+modalContent+'" id="cartContent">'+data.page_data+'</div></div>');
         
            },'JSON');
      });

  });
</script>
</div></div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div>
</body>  
  </html>